<template>
	<gui-page>
		<template v-slot:gBody>
			<gui-a-header title="职位详情"></gui-a-header>
			<view class="list">
				<view class="post-list bgfff boxShadow">
					<view class="item">
						<view class="flex-ac-jb">
							<text class="title">{{detailData.postName}}</text>
							<text class="pay f24 colorRed">{{detailData.postMoney}}</text>
						</view>
						<view class="info flex-ac f22">
							<text>{{detailData.addressInfo}} {{detailData.work}} {{detailData.education}}
								招{{detailData.recruitNum}}人</text>
						</view>
						<view class="flex-ac-row f18" v-if="detailData.comUsertConpanyInfo.welfareTreatment">
							<view class="post-label c999"
								v-for="(wItem,wIndex) in detailData.comUsertConpanyInfo.welfareTreatment.split(',')"
								:key="wIndex">{{wItem}}</view>
						</view>
						<view class="company flex-ac-jb">
							<view class="left flex-ac flex1">
								<!-- <image class="qiye-icon" :src="detailData.comUsertConpanyInfo.logo" mode="aspectFill">
								</image> -->
								<gui-image :width="60" :height="60" :src="detailData.comUsertConpanyInfo.logo"
									borderRadius="14rpx" mode="aspectFill" style="margin-right: 10rpx;"></gui-image>
								<view class="info flex-dc">
									<text class="c333 f24">{{detailData.comUsertConpanyInfo.companyName}}</text>
									<text class="c666 f20">在招岗位：{{detailData.ytdNum}}个</text>
								</view>
							</view>
							<view class="saveBtn f20" v-if="detailData.shShouCang == 0" @click="postCollect(0)">
								<text>已收藏</text>
								<image class="icon" src="../../static/mine/collect.png" mode="widthFix"
									style="height: auto;"></image>
							</view>
							<view class="saveBtn f20 no-collect" v-if="detailData.shShouCang == 1"
								@click="postCollect(1)">
								<text>岗位收藏</text>
								<image class="icon" src="../../static/mine/collect_no.png" mode="widthFix"
									style="height: auto;"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="info-con bgfff">
				<view class="title-img flex-ac">
					<image src="../../static/mine/zhiweijiashao.png" mode="widthFix" style="height: auto;"></image>
					<text class="f26 gui-bold">职位介绍</text>
				</view>
				<view class="desc-con flex-dc f24">
					<text>{{detailData.workInfo}}</text>
				</view>
				<view class="title-img flex-ac">
					<image src="../../static/mine/zhiweiyaoqiu.png" mode="widthFix" style="height: auto;"></image>
					<text class="f26 gui-bold">职位要求</text>
				</view>
				<view class="desc-con flex-dc f24">
					<text>1. 年龄：{{detailData.age}}；</text>
					<text>2. 学历：{{detailData.education}}；</text>
					<text>3. 工作经验：{{detailData.work}}；</text>
					<text>4. 残疾等级：{{detailData.physicalGrade}}；</text>
					<text>5. 残疾类别：{{detailData.physicalType}}；</text>
					<text>6. 是否缴纳社保：{{detailData.socialSecurity}}；</text>
					<text v-if="detailData.physicalType == '肢体残疾'">7. 肢体残疾部位：{{detailData.physicalContext || '--'}}；</text>
					<text v-if="detailData.physicalType == '多重残疾'">7. 多重残疾情况：{{detailData.physicalTypeVar || '--'}}；</text>
					<!-- <text>7. 肢体残疾部位：{{detailData.physicalContext || '--'}}；</text> -->
				</view>
				<view class="title-img flex-ac">
					<image src="../../static/mine/fulidaiyu.png" mode="widthFix" style="height: auto;"></image>
					<text class="f26 gui-bold">福利待遇</text>
				</view>
				<view class="desc-con flex-dc f24">
					<view class="fl">
						{{detailData.welfareContext}}
					</view>
				</view>
				<view class="secure-tip flex-dc radius">
					<text class="colorBlue f26 gui-bold">安全提示：</text>
					<!-- <text class="z-index1 f22">本平台严禁用人单位做出任何损害求职者合法权益的违法
						违规行为，包括但不限于扣押求职者证件、收取求职者财
						物、向求职者集资、让求职者入股等，您一旦发现此类行
						为，请立即联系徐州市人力资源市场: <text class="colorRed gui-bold">0516-85805892</text> 举报</text> -->
					<rich-text :nodes="cautionTxt"></rich-text>
					<image class="icon" src="../../static/image/anquan.png" mode="widthFix" style="height: auto;">
					</image>
				</view>
			</view>
			<view class="info-con bgfff" style="margin-top: 10rpx;">
				<view class="flex-ac-jb"
					@tap="$u.to(`/pages/mine/company-collect-detail?id=${detailData.comUsertConpanyInfo.id}`)">
					<view class="title-img flex-ac">
						<image src="../../static/mine/qiye.png" mode="widthFix" style="height: auto;"></image>
						<text class="f26 gui-bold">企业信息</text>
					</view>
					<text class="colorBlue f26 gui-bold">更多信息</text>
				</view>
				<view class="company-info">
					<view class="logo-info flex-ac">
						<gui-image :width="82" :height="82" :src="detailData.comUsertConpanyInfo.logo"
							borderRadius="14rpx" mode="aspectFill"></gui-image>
						<!-- <image class="comLogo radius" :src="detailData.comUsertConpanyInfo.logo" mode="aspectFill">
						</image> -->
						<view class="flex-dc" style="margin-left: 20rpx;">
							<text class="f24">{{detailData.comUsertConpanyInfo.companyName}}</text>
							<text class="f22 c666">
								{{(detailData.comUsertConpanyInfo.industry ? detailData.comUsertConpanyInfo.industry + '/' : '')}}
								{{(detailData.comUsertConpanyInfo.financing ? detailData.comUsertConpanyInfo.financing + '/' : '')}}
								{{detailData.comUsertConpanyInfo.personnel}}</text>
						</view>
					</view>
					<view class="company-text flex-dc f24">
						<!-- <text>注册资金：{{detailData.comUsertConpanyInfo.registerMoney}}</text>
						<text>成立时间：{{detailData.comUsertConpanyInfo.creTime}}</text>
						<text>法人代表：{{detailData.comUsertConpanyInfo.person}}</text> -->
						<text>注册地址：{{detailData.comUsertConpanyInfo.registerAddress}}</text>
						<view class="flex-ac" @click="callPhone">联系人：{{detailData.comUsertConpanyInfo.contacts }}
							<image src="../../static/mine/phone.png" mode="widthFix" style="height: auto;"></image>
						</view>
					</view>
				</view>
				<view class="title-img flex-ac">
					<image src="../../static/index/location.png" mode="widthFix" style="height: auto;width: 18rpx;">
					</image>
					<text class="f26 gui-bold">工作地址</text>
				</view>
				<view class="address" @click="showLocation">
					<view class="address-name flex-ac-jb f24 c666">
						<text>{{detailData.comUsertConpanyInfo.workAddress}}</text>
						<text class="gui-icons">&#xe601;</text>
					</view>
					<view class="map">
						<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude"
							:markers="covers"></map>
					</view>
				</view>
			</view>
			<view class="saveBtn btnFixed" v-if="!isHideTabbar && detailData.shTouDi == 1" @click="deliverFun">投递简历
			</view>
			<view class="saveBtn btnFixed" style="background: #999999;color: #fff;" v-else-if="!isHideTabbar">已投递</view>
		</template>
	</gui-page>
</template>

<script setup>
	import {
		storeToRefs
	} from 'pinia'
	import {
		useUserStore
	} from '@/stores/user.js'
	import {
		selectPostByCompanyInfoAll,
		UpUserPostFollow,
		insertComUserPostInfo
	} from '@/api/user.js';

	import {
		selectPromptByTwo
	} from '@/api/company.js';
	const store = useUserStore()
	const {
		isLogin,
		isHideTabbar,
		isApplyfor
	} = storeToRefs(store)

	import {
		useGetterMap
	} from '@/utils/useGetters.js';
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const $u = reactive(inject('$u'))
	const longitude = ref('116.39742')
	const latitude = ref('39.909')
	const covers = ref([{
		id: 1,
		latitude: 39.909,
		longitude: 116.39742,
		width: 16,
		height: 25,
		iconPath: '/static/index/location.png'
	}])

	const postId = ref('')
	const detailData = ref({
		comUsertConpanyInfo: {}
	})
	const cautionTxt = ref('')
	const isClick = ref(true);

	onLoad((option) => {
		if (option.id) {
			postId.value = option.id;
			loadDetail();
		}
	})

	const deliverFun = () => {
		console.log(isLogin.value);
		if (isApplyfor.value) {
			$u.msg("您已经申请成为企业，请耐心等待审核")
			return;
		}
		if (!isLogin.value) {
			$u.to('/pages/login/login');
		} else {
			uni.showLoading({
				title: '请稍后...'
			})
			if (isClick.value) {
				isClick.value = false;
			} else {
				return;
			}
			insertComUserPostInfo({
				refPostId: postId.value
			}).then(res => {
				if (res.code == 200) {
					$u.to(`/pages/success/success?type=1`, 'redirectTo')
				} else {
					if (res.msg == '请完善个人简历') $u.to(`/pages/mine/curriculumVitae/curriculum-vitae`);
					isClick.value = true;
				}
				console.log(res);
			}).catch(err => {
				console.log(err);
			}).finally(() => {
				uni.hideLoading();
			})
		}
	}

	const loadDetail = () => {
		selectPostByCompanyInfoAll({
			id: postId.value
		}).then(res => {
			if (res.code == 200) {
				detailData.value = res.data;
				let result = res.data.comUsertConpanyInfo;
				latitude.value = Number(result.lat)
				longitude.value = Number(result.lon)
				covers.value = [{ //地图标点
					id: 1,
					latitude: Number(result.lat),
					longitude: Number(result.lon),
					width: 16,
					height: 25,
					iconPath: '/static/index/location.png'
				}]
			}
		})

		selectPromptByTwo().then(res => {
			if (res.code == 200) {
				cautionTxt.value = res.data.context;
			}
		})
	}

	// 收藏职位
	const postCollect = (isSc) => {
		UpUserPostFollow({
			refPostId: postId.value
		}).then(res => {
			if (res.code == 200) {
				if (isSc == 0) {
					detailData.value.shShouCang = 1;
					$u.msg('已取消');
				} else {
					detailData.value.shShouCang = 0;
					$u.msg('已收藏');
				}
			}
		})
	}

	const callPhone = () => {
		$u.makePhone(detailData.value.comUsertConpanyInfo.phone.toString());
	}

	const showLocation = () => {
		if (detailData.value.comUsertConpanyInfo.lat && detailData.value.comUsertConpanyInfo.lon) {
			uni.openLocation({
				latitude: Number(detailData.value.comUsertConpanyInfo.lat),
				longitude: Number(detailData.value.comUsertConpanyInfo.lon),
				name: detailData.value.comUsertConpanyInfo.workAddress,
				success: function() {
					console.log('success');
				}
			});
		}
	}
</script>

<style lang="scss">
	.list {
		padding: 17rpx 38rpx;

		.post-list {
			padding: 25rpx;
			border-radius: 14rpx 14rpx 14rpx 14rpx;

			.item {
				padding-bottom: 0;
			}

			.company {
				.qiye-icon {
					width: 60rpx;
					height: 60rpx;
					border-radius: 14rpx;
				}

				.saveBtn {
					width: 130rpx;
					height: 43rpx;
					border-radius: 14rpx;
					margin-left: 20rpx;
					background: #4072FE;

					.icon {
						width: 20rpx;
						margin-left: 10rpx;
					}
				}

				.no-collect {
					background: rgba(64, 114, 254, 0.2);
					color: #4072FE;
				}
			}
		}
	}

	.info-con {
		padding: 40rpx 38rpx;

		.desc-con {
			line-height: 40rpx;
			margin-top: 26rpx;
			margin-bottom: 54rpx;
		}

		.secure-tip {
			position: relative;
			background: #F2F2F2;
			padding: 37rpx 48rpx 37rpx 39rpx;
			line-height: 40rpx;

			.icon {
				position: absolute;
				right: 26rpx;
				top: 28rpx;
				width: 70rpx;
				opacity: .5;
			}
		}

		.company-info {
			margin-top: 30rpx;
			margin-bottom: 46rpx;

			.logo-info {
				line-height: 36rpx;
			}

			.comLogo {
				width: 82rpx;
				height: 82rpx;
				margin-right: 16rpx;
			}

			.company-text {
				line-height: 40rpx;
				margin-top: 20rpx;

				image {
					width: 20rpx;
					margin-left: 15rpx;
				}
			}
		}

		.address {
			.address-name {
				padding-left: 38rpx;
				margin: 20rpx 0 25rpx 0;
			}
		}

		.map {
			width: 674rpx;
			height: 362rpx;
			padding-bottom: 100rpx;
		}
	}

	.btnFixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 90rpx;
		border-radius: 0;
		z-index: 9;
	}
</style>